<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>angularJS Bootstrap</title>
    <link href="../css/bootstrap.css" rel="stylesheet">
    <script src="../js/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<div class="container">
    <h1>Users</h1>
    <table class="table table-striped">
        <thead>
        <tr>
            <th>编辑</th>
            <th>名</th>
            <th>姓</th>
        </tr>
        </thead>
        <tbody>
        <tr ng-repeat="user in users">
            <td>
                <button class="btn" ng-click="editUser(user.id)">
                    <span class="glyphicon glyphicon-pencil"></span>编辑
                </button>
            </td>
            <td>{{user.firstName}}</td>
            <td>{{user.lastName}}</td>
        </tr>
        </tbody>
    </table>

    <button class="btn btn-success" ng-click="editUser('new')">
        <span class="glyphicon glyphicon-user">创建新用户</span>
    </button>
    <hr>
    <h3 ng-show="edit">创建新用户</h3>

    <h3 ng-hide="edit">编辑用户信息</h3>

    <form class="form-horizontal">
        <div class="form-group">
            <label class="col-sm-2 control-label">名：</label>

            <div class="col-sm-10">
                <input placeholder="名" ng-model="firstName" ng-disabled="!edit">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">姓：</label>

            <div class="col-sm-10">
                <input placeholder="姓" ng-model="lastName" ng-disabled="!edit">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">密码：</label>

            <div class="col-sm-10">
                <input placeholder="密码" type="password" ng-model="pass1">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">重复密码：</label>

            <div class="col-sm-10">
                <input placeholder="重复密码" type="password" ng-model="pass2">
            </div>
        </div>
        <hr>

        <button class="btn btn-success" ng-disabled="error||incomplete">
            <span class="glyphicon glyphicon-save"></span>修改
        </button>
    </form>
</div>
<script src="myUser.js"></script>
</body>
</html>